﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">        
        <div ng-controller="MessageController" class="row">
            <div class="col-md-6">
                <p>Enter your name: <input type="text" ng-model="name" /></p>
                <p>Enter your message: <input type="text" ng-model="message" /></p>
                <p><input type="button" value="Submit" ng-click="addMessage()" /></p>
            </div>
            <div class="col-md-6">
                <table class="table table-bordered table-striped">
                    <tr>
                        <th>Name</th>
                        <th>Message</th>
                        <th></th>
                    </tr>
                    <tr ng-repeat="m in chatArray">
                        <td>{{m.name}}</td>
                        <td>{{m.text}}</td>
                        <td><input type="button" value="remove" ng-click="removeMessage(m)" /></td>
                    </tr>
                </table><br />
                <table class="table table-bordered table-striped">
                    <tr>
                        <th>Name</th>
                        <th>Message</th>
                        <th></th>
                    </tr>
                    <tr ng-repeat="m in chatArray | filter:{isActive:false}">
                        <td>{{m.name}}</td>
                        <td>{{m.text}}</td>
                        <td><input type="button" value="remove" ng-click="removeMessage(m)" /></td>
                    </tr>
                </table>
            </div>
        </div>
        <div ng-controller="NameController" class="row">
            <div class="col-md-12">
                <ul>
                    <li ng-repeat="n in chatArray">{{n.name}}</li>
                </ul>
            </div>
        </div>
    </div>
    
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/services/MessageService.js"></script>
    <script src="app/controllers/NameController.js"></script>
    <script src="app/controllers/MessageController.js"></script>
</body>
</html>
